<template>
    <div>
        <van-row class="editor-box-tit">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-3">
                编辑资料
            </van-col>
            <van-col span="8" class="text-align-r color-3 font-3">
                <span class="wancheng" @click="saveUser()">完成</span>
            </van-col>
        </van-row>
        <div class="editor-tx-box text-align-c">
            <span class="tx-box position-r">
                <img class="tx" style="width:3.1rem;height:3.1rem;" :src="$imgPath(userobj.headImg)" v-if="img1==''">
                <img class="tx" :src="$imgPath(img1)" v-else>
                <div class="upload-box">
                    <img class="xj" src="../../assets/image/center/icon_upload.png" alt="">
                </div>
                <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput1" @change="changeImg($event)">
            </span>
        </div>
        <div class="phone-box background-fff position-r">
            <span class="color-3 font-2">上传形象照/视频 （已上传{{photoArr.length}}/6）</span>

            <div class="img-liu">
                
                <em class="img-em position-r" v-for="(val,index) in photoArr" :key="index">
                     <!--支持上传视频,mp4格式-->
                    <video v-if="val.file.url.indexOf('mp4')>0" class="imgjuli" :src="$imgPath(val.file.url)" controls="controls"></video>          
                    <img  v-else class="imgjuli" :src="$imgPath(val.file.url)" alt="">  
                    <img class="close-img" src="../../assets/image/center/icon_close_photo.png" alt="" @click="dropPhoto(index)">
                    <i class="i-zhanshi" @click="setbgImg(index)" v-if="val.status==0">设为展示页</i>                                      
                </em>
               <!--  <i class="i-zhanshi" @click="setbgImg(index)">设为展示页</i>      -->          
                <em class="img-emUpload fl img-em-append text-align-c" v-if="photoArr.length<6">                   
                     <img src="../../assets/image/center/icon_append.png" alt="">                     
                    <input type="file" class="" accept="image/gif,image/jpeg,image/jpg,image/png,video/mp4" ref="avatarInput2" @change="uploadVisualImg($event)">                                        
                </em>
            </div>

            <span class="color-9 font-2">上传真实的照片或视频，有助于提高审核通过率</span>
        </div>
        <div class="ziliao1 clearfix background-fff">
            <ul class="clearfix data-ul">
                <li>
                    <i class="xing fl">*</i>
                    <label class="fl">昵称</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3" type="text" v-model="nickname" v-if="userobj.seller" readonly="readonly" @click="nickPop()">
                    <input class="fr text-align-r color-3" type="text" v-model="nickname" v-else @keyup="checkNickName">                   
                </li>
                <li @click="sexBol=true">
                    <i class="xing fl">*</i>
                    <label class="fl">性别</label>
                    <van-icon class="fr" name="arrow" />                   
                    <input class="fr text-align-r color-3" type="text" v-model="denger" readonly>                    
                </li>
                <li @click="birthdayBol=true">
                    <i class="xing fl">*</i>
                    <label class="fl">生日</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3" type="text" v-model="userobj.birthday" readonly>
                </li>
                <li>
                    <i class="xing fl">*</i>
                    <label class="fl">QQ</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3" type="text" v-model="QQ" @input="checkQQ">
                </li>
            </ul>
        </div>
        <div class="ziliao1 clearfix background-fff">
            <ul class="clearfix data-ul">
                <li>
                    <label class="fl">个性签名</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3 signature" type="text" v-model="signature"  @input="checkSignature">
                </li>
                <li @click="cityBol=true">                   
                    <label class="fl">地区</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3" type="text" v-model="userobj.city" readonly>
                    <!-- <input class="fr text-align-r city color-3" type="text" v-model="userobj.province">  -->                   
                </li>
                <li @click="zodiacSignsBol=true">
                    <label class="fl">星座</label>
                    <van-icon class="fr" name="arrow" />
                    <input class="fr text-align-r color-3" type="text" v-model="userobj.zodiacSigns" readonly>
                </li>
                <li @click="showHobby()">
                    <label class="fl">兴趣爱好</label>
                    <van-icon class="fr" name="arrow" />
                    <span class="hobby fr">                       
                        <input class="color-6 font-24 juli" type="text" v-for="(val,index) in hobbyArr" :key="index"  v-model="hobbyArr[index]">               
                    </span>                                                      
                </li>
            </ul>
        </div>
        <!-- 性别选项弹出层 -->
        <van-popup v-model="sexBol" position="bottom" :overlay="true">
            <van-picker show-toolbar :columns="sexArr" @cancel="onCancelSex" @confirm="onConfirmSex"/>
        </van-popup>
        <!-- 生日选项弹出层 -->
        <van-popup v-model="birthdayBol" position="bottom" :overlay="true">
            <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @cancel="onCancelBirthday" @confirm="onConfirmBirthday"/>
        </van-popup>
        <!-- 地区选项弹出层 -->
        <van-popup v-model="cityBol" position="bottom" :overlay="true">
            <van-area :area-list="areaList" :columns-num="2" value="110101" @cancel="onCancelCity" @confirm="onConfirmCity"/>
        </van-popup>
        <!-- 星座选项弹出层 -->
        <van-popup v-model="zodiacSignsBol" position="bottom" :overlay="true">
            <van-picker show-toolbar :columns="zodiacSignsArr" @cancel="onCancelZodiacSigns" @confirm="onConfirmZodiacSigns"/>
        </van-popup>
        <!-- 兴趣爱好弹出层 -->
        <van-popup v-model="isShow" position="right" :overlay="true" class="hobbyList">           
            <van-row class="editor-box-tit bgc" >
                <van-col span="8">
                    <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="isShow=false">
                </van-col>
                <van-col span="8" class="text-align-c color-3 font-3">
                    兴趣爱好
                </van-col>
                <van-col span="8" class="text-align-r color-3 font-3">
                    <span class="wancheng" @click="changeHobby()">完成</span>
                </van-col>
            </van-row>
            <van-row class="activeHobby">
                <van-col span="24">
                    <span v-for="(val,index) in hobbyArr" :key="index" @click="dropHobby(index)">{{val}}</span>                     
                </van-col>                                                        
            </van-row>
            <van-row class="hobbyarr">
                <van-col span="24" class="color-3 font-3">最多可以选择3个</van-col>
                <van-col span="24">
                    <span v-for="(val,index) in hobbyList" :key="index" @click="selectHobby(index,val.name)" :class="[val.class == true ? 'hobbyClass' : '']">{{val.name}}</span>                     
                </van-col>                                                        
            </van-row>      
        </van-popup>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Uploader, Toast } from 'vant'
import { Area } from 'vant'
export default { 
    data(){
        return{          
            userobj:{},
            currentDate: new Date(),
            birthdayBol:false,
            minDate:new Date(1960, 1, 1),            
            maxDate: new Date(),
            sexArr:["未知","男","女"],
            sexBol:false,
            denger:"",
            areaList:{
                province_list: this.$province_list,
                city_list: this.$city_list
            },            
            cityBol:false,
            zodiacSignsArr:["水瓶座","双鱼座","白羊座","金牛座","双子座","巨蟹座","狮子座","处女座","天秤座","天蝎座","射手座","魔蝎座"],
            zodiacSignsBol:false,
            isShow:false ,                  
            hobbyArr:[],
            img1:'',        
            files:[],
            hobbyList:[],          
            photoArr:[],
            fileId:'',
            groupCode:"interest" ,
            signature:"",  //个性签名
            count:0,        //字符数 
            nickname:"",
            QQ:""               
        }
    }, 
    created(){
        this.editordata();
        this.getUserImg();          
    },  
    methods:{     
        getUserImg(){      //获取用户相册信息
            let params = {
               
            }              
            apiHttp.apiCenter.getUserImgme(params,resp=>{                                
                if(resp.code==200){
                    this.photoArr = resp.data.content; 
                }else{
                    Toast(resp.message);
                }                            
            })
        },   
        //上传形象照/视频
        uploadVisualImg(event){
            let fd = new FormData()
            fd.append('model','user/photo')
            if (this.$refs.avatarInput2.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput2.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.img2 = resp.data.url
                    this.files.push(resp.data.fileId)
                    this.fileId = resp.data.fileId
                    let params = {
                        fileId :this.fileId
                    }
                    //保存用户相册接口
                    apiHttp.apiCenter.addUserImg(this.fileId,params,resp=>{                       
                        if(resp.code==200){
                            //重新加载用户相册
                            this.getUserImg();
                            Toast(resp.message)
                        }else{
                            Toast(resp.message)
                        }
                    }) 
                }else{
                    Toast(resp.message)
                }                
            })
            
        },
        //删除相册
        dropPhoto(index){
             let params = {
               id:this.photoArr[index].id
            }
            apiHttp.apiCenter.deleteUserImg(this.photoArr[index].id,params,resp=>{        
                if(resp.code == 200){
                    //重新加载用户相册
                    this.getUserImg();
                    Toast("删除成功！");                             
                }else{
                    Toast(resp.message);
                }   
            })
        },
        //设为展示页
        setbgImg(index){
            let params = {
               id:this.photoArr[index].id
            }
            apiHttp.apiCenter.setUserImg(this.photoArr[index].id,params,resp=>{                              
                if(resp.code == 200){
                    //刷新相册
                    this.getUserImg();
                    Toast("设置成功！");                             
                }else{
                    Toast(resp.message);
                }   
            })
        },
        editordata(){      //编辑资料-获取个人信息
            let params = {
               
            }              
            apiHttp.apiCenter.detail(params,resp=>{               
                if(resp!=null){
                   this.signature = resp.signature; 
                   this.nickname = resp.nickname;
                   this.QQ = resp.qq;
                   if(resp.headImg==null || resp.headImg==''){
                        resp.headImg = '/user/head/defaultHeadImage.png';
                    }                   
                    this.userobj = resp;  
                    if(this.userobj.hobby != null){
                        this.hobbyArr = this.userobj.hobby.split(',');    
                    }                      
                    if(this.userobj.sex==1){
                        this.denger = "男";
                    }else if(this.userobj.sex==2){
                        this.denger = "女";
                    }else{
                        this.denger = "未知";
                    }
                }                                                                                                            
            })
        },
        //不能修改昵称的提示弹框 
        nickPop(){
            this.$dialog.alert({
                confirmButtonText:"我知道了",
                title:'提示',            
                message: "您好，服务认证通过后，昵称不可修改，如有问题请联系客服"
            }).then(() => { 

            }).catch(() => {
                // on cancel
            })           
        },
        //昵称验证 
        checkNickName(){
            this.count = this.nickname.length;
            if(this.count>=10){
                this.nickname = this.$str(this.nickname,0,10); 
            }                    
        },    
        //个性签名验证 
        checkSignature(){
           this.count = this.signature.length;
            if(this.count>=18){
                this.signature = this.$str(this.signature,0,18); 
            }
        },
         //QQ验证
        checkQQ(){            
            //过滤特殊字符
            this.QQ = this.QQ.replace(/[^0-9]+/, '');

            this.count = this.QQ.length;
            if(this.count>=18){
                this.QQ = this.$str(this.QQ,0,18); 
            }
        },    
        showHobby(){//显示兴趣爱好列表          
             this.isShow = !this.isShow;
              //查询兴趣爱好标签字典表列表接口
            let params = {
                groupCode:this.groupCode
            }            
            apiHttp.apiCenter.getHobby(this.groupCode,params,resp=>{               
                if(resp!=null){
                    this.hobbyList = resp;                        
                    for(var i=0;i<this.hobbyArr.length;i++){
                        for(var j=0;j<this.hobbyList.length;j++){
                            if(this.hobbyArr[i]==this.hobbyList[j].name){                      
                                this.hobbyList[j].class=true
                            }
                        } 
                    }   
                }                                                                                    
            })          
                      
        },
        //修改头像(上传图片)
        changeImg(event){
            let fd = new FormData()
            fd.append('model','user/head')
            if (this.$refs.avatarInput1.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.img1 = resp.data.url
                    this.files.push(resp.data.fileId)                                 
                }else{
                    Toast(resp.message)
                }                               
                this.userobj.headImg = this.img1;
            })
        },        
        saveUser(){         //修改用户信息 
            this.userobj.signature = this.signature; 
            this.userobj.nickname = this.nickname;
            this.userobj.qq = this.QQ;              
            let params = this.userobj;          
            apiHttp.apiCenter.updateUser(params,resp=>{               
                if(resp.code==200){
                    Toast("修改成功！");
                    this.$router.push({
                        name:'center'
                    })
                }else{
                    Toast(resp.message)
                }
            })
        },       
        onClickLeft(){
            this.$router.back(-1)
        },
        selectHobby(index,val){      //选择兴趣爱好 
            for(var i=0;i<this.hobbyArr.length;i++){              
                if(this.hobbyArr[i]==val){
                    Toast("不能选重复的");
                    return  
                }
            }          
            if(this.hobbyArr.length==3){    
                Toast("最多只能选择3个");                
            }else{
                this.hobbyArr.push(this.hobbyList[index].name);
                this.hobbyList[index].class = true;
            }             
        },
        dropHobby(index){   //删除兴趣爱好                      
            for(var j=0;j<this.hobbyList.length;j++){
                    if(this.hobbyArr[index]==this.hobbyList[j].name){
                         this.hobbyList[j].class = false; 
                    }
            } 
            this.hobbyArr.splice(index,1);                                                     
        },
        changeHobby(){  //将兴趣爱好数据数组转换成字符串          
            this.userobj.hobby = this.hobbyArr.join(",");                     
            this.isShow = false;
        },       
        onConfirmBirthday(value, index) {   //生日选择器确定按钮事件
            let d = new Date(value)
            this.userobj.birthday = this.$time1(d);
            //计算年龄
             var newDate = this.$time1(new Date());
             var year1 = this.$str(newDate,0,4);            
             var year2 = this.$str(this.userobj.birthday,0,4);
             this.userobj.age = year1-year2;                  
            this.birthdayBol = false; 
        },       
        onCancelBirthday() {    //生日选择器取消按钮事件          
            this.birthdayBol = false;
        },
        onConfirmSex(value, index) {   //性别选择器确定按钮事件
            this.denger = value;
            this.userobj.sex = index;
            this.sexBol = false; 
        },       
        onCancelSex() {    //性别选择器取消按钮事件          
            this.sexBol = false;
        },
        onConfirmCity(value, index) {   //地区选择器确定按钮事件
            this.userobj.province = value[0].name;
             this.userobj.city = value[1].name;                    
            this.cityBol = false; 
        },       
        onCancelCity() {    //地区选择器取消按钮事件          
            this.cityBol = false;
        },
        onConfirmZodiacSigns(value, index) {   //星座选择器确定按钮事件
            this.userobj.zodiacSigns = value;           
            this.zodiacSignsBol = false; 
        },       
        onCancelZodiacSigns() {    //星座选择器取消按钮事件          
            this.zodiacSignsBol = false;
        }       
    }
}
</script>
<style scoped>
.signature{
    display: inline-block;
    width: 74%;
}
.data-ul{
    border-top:.4rem solid #eeeeee;
}
.file-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    border: none;
    background-color: transparent;
    z-index: 99;
    opacity: 0;
}
.editor-box-tit{
    background:rgba(246,246,246,1);
}
.bgc{
    background-color: #FFFFFF;
}
.editor-tx-box{
    background:rgba(246,246,246,1);
    height: 4.8rem;
    line-height: 4.8rem;
}
.tx-box{
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    display: inline-block;
}
.editor-tx-box .tx{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}
.upload-box{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 3rem;
    height: 3rem;
}
.van-uploader{
    width: 3rem;
    height: 3rem;
}
.xj{
    position: absolute;
    right: 0;
    bottom: 0;
    width: .9rem;
}
.phone-box{
    padding: .6rem .6rem .2rem .6rem;
}
.phone-box span{
    display: block;
}
.phone-box span:nth-child(1),span:nth-child(3){
    height: 1.2rem;
    line-height: 1.2rem;
}
/* 相册展示样式 */
.img-liu{  
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
}
.img-em{    
    min-height: 3.5rem; 
    height: 3.5rem;
    line-height: 3.5rem;   
    background:rgba(246,246,246,1); 
    margin-right: .4rem; 
}
/* 上传形象照样式 */
.img-emUpload{
    min-height: 3.5rem; 
    height: 3.5rem;
    line-height: 3.5rem;   
    background:rgba(246,246,246,1); 
    margin-right: .4rem; 
    width: 3.5rem;
    min-width: 3.5rem;
   text-align: center;
   position: relative;
   display: inline-block; 
}
.img-emUpload>input{
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 100%;
    font-size: 0;
    border: none;
    background-color: transparent;
    z-index: 99;
    opacity: 0;
    min-height: 3.5rem; 
    height: 3.5rem;
    line-height: 3.5rem;   
    background:rgba(246,246,246,1); 
}
.img-em-append>img{
    width: 55%;
    vertical-align: middle;
}
.img-liu::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
}
.imgjuli{    
    width: 3.5rem;
    height: 3.5rem;
}
.close-img{
    width: .6rem !important;
    height: .6rem !important;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;         
}
.i-zhanshi{
    position: absolute;
    right: 0;
    bottom: 0.3rem;
    color: #fff;
    background-color: #E55F5E;
    display: inline-block;
    height: .6rem;
    line-height: .6rem;
    font-size: .2rem;
    padding-left: .2rem;
    padding-right: 0.15rem;
    border-radius: .6rem 0 0 .6rem;
}
/* .i-zhanshi{
    position: absolute;
    left: 2rem;
    bottom: 1.8rem;
    color: #fff;
    background-color: #E55F5E;
    display: inline-block;
    height: .6rem;
    line-height: .6rem;
    font-size: .2rem;
    padding-left: .2rem;
    padding-right: 0.15rem;
    border-radius: .6rem 0 0 .6rem;
} */

.ziliao1 li {
    height: 1.8rem;
    line-height: 1.8rem;
    color: #999;
    font-size: .6rem;
    border-bottom: #eeeeee solid .04rem;
    padding: 0 .6rem;
}
.ziliao1 li .xing{
    color: #E55F5E;
    padding-right: .2rem;
}
.van-icon-arrow{
    margin-top: .6rem;
    margin-left: .4rem;
}
.hobby{
    margin-top: 0.2rem;
}
.hobby input{ 
    display: inline-block;
    min-width: 1rem;
    max-width: 2.5rem;
    height: .6rem;
    background-color: #EEEEEE;
    line-height: .6rem;
    padding: .2rem .4rem;
    border-radius: .6rem;
    text-align: center;
    font-size: 0.5rem;
}
.juli{
    margin: .2rem 0 .2rem .4rem;
}
.hobbyList{
    width: 100%;
    height: 100%;
}
.activeHobby{
    padding: 0.8rem 2%;
    border-bottom: #eeeeee solid .04rem;
}
.activeHobby span{ 
    display: inline-block;
    width: 22%;
    height: .8rem;
    background-color: #D84E4D;
    line-height: .8rem;
    padding: .2rem .4rem;
    border-radius: .6rem;
    color: white;
    margin: 0.5rem 2.7%; 
    text-align: center;   
}
.hobbyClass{    
    background-color: #D84E4D !important; 
    color: #fff !important;
}
.hobbyarr{
    padding: 0.8rem 2%;
}
.hobbyarr span{ 
    display: inline-block;
    width: 22%;
    height: .8rem;
    background-color: #EEEEEE;
    line-height: .8rem;
    padding: .2rem .4rem;
    border-radius: .6rem;
    color: #666666;
    margin: 0.5rem 2.7%; 
    text-align: center;   
}
.color-3{
    padding-left: 0.3rem;
}
</style>


